<template>
  <view class="cart">
    <u-navbar
      z-index="999"
      :is-back="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
    >
      <view class="navabar-costome">
        <image class="avatar" src="/static/images/avatar.png" />
        <view class="inner-title">购物车</view>
      </view>
    </u-navbar>
    <view class="panel">
      <view class="count"> 货品({{ checkedNum }}) </view>
      <view class="button" @click="operate = !operate">
        {{ operate ? '取消管理' : '管理' }}
      </view>
    </view>
    <view class="list">
      <view v-for="(item, index) of list" :key="item.skuId" :index="index">
        <view class="list-item">
          <view style="display: flex; align-items: center">
            <u-checkbox-group
              shape="circle"
              active-color="#04B27C"
              :icon-size="32"
            >
              <u-checkbox v-model="item.checked" :icon-size="32"> </u-checkbox>
            </u-checkbox-group>
          </view>
          <image class="product-item-img" :src="item.image" mode="" />
          <view class="flex-column">
            <view class="font-bold">{{ item.title }}</view>
            <view class="flex-between">
              <view class="price">
                <text>￥</text>
                <text class="size-32">{{ item.price }}</text>
                <text>/ {{ item.unit }}</text>
              </view>
              <view>
                <button v-if="operate">删除</button>
                <NumberBox v-else v-model="item.num" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view style="flex: 1">
        <u-checkbox-group shape="circle" active-color="#04B27C" :icon-size="32">
          <u-checkbox v-model="footCheck" :icon-size="32"> 全选 </u-checkbox>
        </u-checkbox-group>
      </view>
      <view>
        <text class="total-price">合计：</text>
        <text class="price">¥ </text>
        <text class="price size-44">{{ +totlePrice?.toFixed(2) }}</text>
      </view>
      <u-button
        @click="confirm"
        :disabled="checkedNum <= 0"
        size="medium"
        type="primary"
      >
        去结算({{ checkedNum }})
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import NumberBox from '@/components/NumberBox.vue'

const list = ref([
  {
    title: '商品名称',
    skuId: '1',
    show: false,
    checked: false,
    price: 100,
    num: 1,
    unit: '件',
    img: 'https://cdn.uviewui.com/uview/album/1.jpg'
  }
])
const operate = ref(false)
</script>

<style lang="scss" scoped>
.cart {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #f4f5f7;
}
.navabar-costome {
  position: relative;
  width: 100%;
  height: 100%;
  .inner-title {
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 34rpx;
    color: #1c2026;
  }
  .avatar {
    width: 64rpx;
    height: 64rpx;
    margin-left: 24rpx;
  }
}
.panel {
  display: flex;
  justify-content: space-between;
  padding: 32rpx;
  .count {
    color: #000000;
    font-size: 32rpx;
  }
  .button {
    border: 2rpx solid #04b27c99;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    color: #04b27c;
    font-size: 24rpx;
  }
}
.list {
  flex: 1;
  box-shadow: 0px 1px 4px 0px #89898914;
  margin-top: 24rpx;
  .list-item {
    display: flex;
    background-color: #fff;
    padding: 0 24rpx 24rpx 24rpx;
    .product-item-img {
      width: 144rpx;
      height: 144rpx;
      border-radius: 16rpx;
    }
    .font-bold {
      font-size: 28rpx;
      font-weight: bold;
      color: #262626;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .flex-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .flex-between {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
.footer {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0px -1px 8rpx 0px #8989891a;
  border-radius: 32rpx 32rpx 0 0;
  height: 112rpx;
  padding: 0 32rpx;
  .total-price {
    font-size: 28rpx;
    color: #262626;
  }
}
.price {
  color: #e8424a;
  font-size: 28rpx;
  font-weight: bold;
  .size-32 {
    font-size: 32rpx;
  }
  .size-44 {
    font-size: 33rpx;
  }
}
</style>
